<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#F8F8F8;">
			<view class="card">
				<view class="title_header gui-flex gui-align-items-center">
					<image class="t_img" src="@/static/image/khzl.png" mode="widthFix"></image>
					<text class="f28 c333 ml_20">客户资料</text>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center">
					<view class="label">
						客户头像
					</view>
					<view class="value">
						<!-- <image class="tx_img" :src="clientData.avatar" mode="aspectFit"></image> -->
						<image class="tx_img" :src="clientData.avatar" mode="aspectFill" v-if="clientData.avatar"></image>
						<image class="tx_img" src="../../static/tx.png" mode="aspectFill" v-else></image>
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						客户名称
					</view>
					<view class="value">
						{{(clientRecord) ? clientData.name : "认领客户后显示"}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						手机号
					</view>
					<view class="value">
						{{(clientRecord) ? clientData.phone : "认领客户后显示"}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						联系地址
					</view>
					<view class="value">
						{{(clientRecord) ? clientData.address : "认领客户后显示"}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						微信号
					</view>
					<view class="value">
						{{(clientRecord) ? clientData.wechat : "认领客户后显示"}}
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between">
					<view class="label">
						其他联系方式
					</view>
					<view class="value">
						QQ123@163.com
					</view>
				</view> -->
			</view>
			<view class="card">
				<view class="title_header gui-flex gui-align-items-center">
					<image class="t_img" src="@/static/image/khxx.png" mode="widthFix"></image>
					<text class="f28 c333 ml_20">客户信息</text>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						渠道来源
					</view>
					<view class="value">
						{{clientData.source}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						导入人员
					</view>
					<view class="value">
						{{clientData.userName}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						导入时间
					</view>
					<view class="value">
						{{clientData.createTime}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						客户诉求
					</view>
					<view class="value gui-flex1" style="text-align: right;">
						{{clientData.appeal}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						客户状态
					</view>
					<view class="value">
						{{$u.typeFormData(clientData.type)}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						客户等级
					</view>
					<view class="value">
						<uni-rate size="12" :readonly="true" :value="clientData.level" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						客户类别
					</view>
					<view class="value">
						{{$u.clientTypeFormData(clientData.clientType) || '--'}}
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between">
					<view class="label">
						客户状态
					</view>
					<view class="value">
						参数待完善
					</view>
				</view> -->
			</view>
			<view class="card" v-if="!clientRecord">
				<view class="title_header gui-flex gui-align-items-center">
					<image class="t_img" src="@/static/image/gjzt.png" mode="widthFix"></image>
					<text class="f28 c333 ml_20">跟进状态</text>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						跟进状态
					</view>
					<view class="value">
						未跟进
					</view>
				</view>
			</view>
			<view class="card" v-else>
				<view class="title_header gui-flex gui-align-items-center">
					<image class="t_img" src="@/static/image/gjzt.png" mode="widthFix"></image>
					<text class="f28 c333 ml_20">跟进状态</text>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						跟进人
					</view>
					<view class="value">
						{{clientRecord.userName}}
					</view>
				</view>
				<view class="row gui-flex gui-space-between">
					<view class="label">
						跟进状态
					</view>
					<view class="value gui-flex">
						{{$u.followStateFormData(followStateArray[clientRecord.followState].value)}}
						<!-- <picker @change="bindPickerChange" :value="clientRecord.followState" :range="followStateArray"
							range-key="label">
							<text class="add_link ml_10">更改状态 ></text>
						</picker> -->
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between">
					<view class="label">
						跟进内容
					</view>
					<view class="value">
						{{clientRecord.followContent || '暂无'}}
					</view>
				</view> -->
				<view class="row gui-flex gui-space-between">
					<view class="label">
						成交状态
					</view>
					<view class="value">
						{{clientRecord.openState == 1 ? '已开户' : '未开户'}}
						<!-- <text class="add_link ml_10" @tap="changeOpenState" v-if="isCanChange">更改状态 ></text> -->
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between">
					<view class="label">
						下次联系时间
					</view>
					<view class="value">
						<picker mode="date" :value="updateForm.nextTime" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<text v-if="updateForm.nextTime">
								{{updateForm.nextTime}}
							</text>
							<text class="add_link ml_10" v-else>选择时间 ></text>
						</picker>
					</view>
				</view> -->
				<view class="row gui-flex gui-space-between">
					<view class="label">
						最近跟进时间
					</view>
					<view class="value">
						{{clientRecord.lastTime || '--'}}
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between">
					<view class="label">
						备注
					</view>
					<view class="value">
						{{clientRecord.remark || '无'}}
					</view>
				</view> -->
			</view>
			<view class="card" v-if="clientContents.length > 0">
				<view class="title_header gui-flex gui-align-items-center">
					<image class="t_img" src="@/static/image/gjzt.png" mode="widthFix"></image>
					<text class="f28 c333 ml_20">跟进记录</text>
				</view>
				<view class="border_line1" style="padding: 26rpx;overflow-y: auto;">
					<view class="row_gj gui-flex gui-align-items-start c333" v-for="(item,index) in clientContents"
						:key="index">
						<view class="time f28">
							{{item.createTime}}
						</view>
						<view class="content gui-flex1 f28">
							{{item.content}}
						</view>
					</view>
				</view>
				<!-- <view class="gui-flex gui-justify-content-end mt_20" v-show="clientRecord && !addFormShow">
					<view class="add_link" @tap="addFormShow = true">
						+增加跟进记录
					</view>
				</view> -->

			</view>
			<view class="card" v-else>
				<view class="title_header gui-flex gui-align-items-center gui-space-between">
					<view class="left">
						<image class="t_img" src="@/static/image/gjzt.png" mode="widthFix"></image>
						<text class="f28 c333 ml_20">跟进记录</text>
					</view>
					<!-- <view class="add_link" @tap="addFormShow = true">
						+增加跟进记录
					</view> -->
				</view>
				<view class="border_line gui-flex gui-align-items-center gui-justify-content-center">
					<view class="no_data c999 f28">
						暂无跟进记录
					</view>
				</view>
			</view>
			<view class="add_con gui-flex" v-show="addFormShow">
				<view class="left gui-flex1">
					<textarea class="textarea_warp" v-model="form.content" placeholder="请输入跟进内容"></textarea>
				</view>
				<view class="right">
					<view class="add_link" @tap="addContent">
						确认添加
					</view>
					<view class="add_link mt_20" @tap="closeAddform">
						删除
					</view>
				</view>
			</view>
			<!-- <view class="btn_warp" v-if="clientRecord">
				<button class="m_btn" @tap="updateRecord">更新</button>
			</view> -->
			<view class="btn_warp" v-if="!clientData.forzenFlag == 1">
				<button class="m_btn" @tap="claimClient">认领客户</button>
			</view>
			<!-- <view class="line_warp" @tap="updateClientFree" v-if="clientRecord && clientData.type != 3">
				<view class="line_link">
					客户释放至公海
				</view>
			</view> -->
			<view class="zw" style="height: 100rpx;">

			</view>
			<bai-showModel ref="baiShowModel" @verify="modelVerify"></bai-showModel>
			<bai-inputModel ref="baiInputModel" @verify="modelVerify2"></bai-inputModel>

		</view>
	</gui-page>
</template>
<script>
	var graceJs = require('@/GraceUI5/js/grace.js');
	// 模拟 api 请求数据，格式见 article.js
	var artciles = require('@/GraceUI5/demoData/article.js');
	export default {
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			return {
				isClick: true,
				isCanChange: false,
				oIndex: '',
				followStateIndex: 0,
				followStateArray: [{
						value: '0',
						label: '未跟进'
					},
					{
						value: '1',
						label: '跟进中'
					},
					{
						value: '2',
						label: '跟进完成'
					}
				],
				addFormShow: false,
				clientId: '',
				clientRecord: null,
				clientContents: [],
				// 全屏 loading
				pageLoading: false,
				clientData: {},
				form: {
					content: ''
				},
				updateForm: {
					nextTime: ''
				}
			}
		},
		onLoad: function(e) {
			if (e) {
				this.oIndex = e.oIndex;
				this.clientId = e.id;
				this.loadData();
			}
		},
		methods: {
			//认领客户
			claimClient(item, index) {
				if (this.isClick) {
					this.isClick = false;
				} else {
					return;
				}
				this.$api.claimClient({
					clientId: this.clientId
				}).then(res => {
					if(res.code == 200) {
						this.$u.msg("认领成功");
						uni.$emit('updateList', this.oIndex)
						setTimeout(() => {
							this.$u.back();
						}, 1000)
					}
				}).finally(e => {
					this.isClick = true;
				})
			},
			// 更新状态
			updateRecord() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要更新客户信息吗？',
					success: function(res) {
						if (res.confirm) {
							let form = {
								clientId: _this.clientId,
								id: _this.clientRecord.id,
								followState: _this.clientRecord.followState,
								openState: _this.clientRecord.openState,
								nextTime: _this.updateForm.nextTime
							}
							if (_this.form.content) {
								form.followContent = _this.form.content;
							}
							_this.$api.updateRecord(form).then(res => {
								if(res.code == 200 && form.nextTime) {
									_this.$u.msg("更新成功")
									_this.$api.addContent({
										clientId: _this.clientId,
										content: `${_this.clientRecord.userName}更新记录：已和客户取得联系并约定下次联系时间为：${form.nextTime}`
									}).then(res => {
										_this.loadData();
									})
								}else if(res.code == 200) {
									_this.$u.msg("更新成功")
									_this.loadData();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 新增跟进记录
			addContent() {
				if (!this.form.content) return this.$u.msg("内容不可为空");
				this.$api.addContent({
					clientId: this.clientId,
					content: this.form.content
				}).then(res => {
					this.$u.msg("添加成功")
					this.loadData();
					this.closeAddform();
				})
			},
			loadData() {
				this.$api.clientDetails({
					clientId: this.clientId
				}).then(res => {
					this.clientData = res.data.client;
					if (res.data.clientRecord) {
						this.clientRecord = res.data.clientRecord;
						if(this.clientRecord.openState == 1) {// 此时已开户不可修改
							this.isCanChange = false;
						}else {
							this.isCanChange = true;
						}
					}
					if (res.data.clientContents.length > 0) {
						this.clientContents = res.data.clientContents;
					}
				})
			},
			bindPickerChange(e) {
				this.clientRecord.followState = e.detail.value
			},
			bindDateChange: function(e) {
				this.updateForm.nextTime = e.detail.value
			},
			closeAddform() {
				this.form.content = '';
				this.addFormShow = false;
			},
			changeOpenState() {
				if (this.clientRecord.openState == 1) {
					this.clientRecord.openState = 0;
				} else if (this.clientRecord.openState == 0) {
					this.clientRecord.openState = 1;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			modelVerify() {
				let _this = this;
				this.$refs.baiInputModel.open();
			},
			modelVerify2(e) {
				let _this = this;
				_this.$api.updateClientFree({
					clientId: _this.clientId,
					content: e
				}).then(res => {
					_this.$u.msg("释放成功");
					uni.$emit('updateList', this.oIndex)
					setTimeout(() => {
						_this.$u.back();
					}, 1000)
				})
			},
			updateClientFree() {
				let _this = this;
				this.$refs.baiShowModel.open();
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.card {
		background-color: #fff;
		padding: 36rpx;

		.title_header {
			height: 80rpx;

			.t_img {
				width: 32rpx;
			}
		}

		.row {
			font-size: 28rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid rgba(222, 226, 229, 0.5);
			
			.label {
				width: 180rpx;
			}
		}

		.tx_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}


	}

	.btn_warp {
		margin: 40rpx 0;
	}

	.line_warp {
		display: flex;
		justify-content: center;

		.line_link {
			font-size: 24rpx;
			color: #666666;
			line-height: 0px;
			text-decoration: underline;
		}
	}

	.add_link {
		font-size: 24rpx;
		color: #0E6EFF;
	}

	.border_line {
		width: 100%;
		height: 205rpx;
		background: #FFFFFF;
		border: 1rpx solid #DEE2E5;
	}

	.border_line1 {
		width: 100%;
		max-height: 505rpx;
		background: #FFFFFF;
		border: 1rpx solid #DEE2E5;
	}

	.add_con {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 36rpx 36rpx 36rpx;

		.textarea_warp {
			border: 1px solid #DEE2E5;
			width: 100%;
			height: 200rpx;
			font-size: 24rpx;
			background-color: #FFFFFF;
			margin-top: 0;
		}

		.right {
			width: 147rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.row_gj {
		width: 100%;
		margin-bottom: 20rpx;

		.content {
			padding-left: 30rpx;
		}
	}
</style>